
<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
</head>
<body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<div id="app">
  <h1>vue-router 基础demo</h1>
    <p>{{ message}}</p> 
   	<router-link to="/go">go</router-link> <!-- 路由调整 默认渲染成a标签 -->
   	<router-link to="/bar">bar</router-link>		<!-- 路由调整 默认渲染成a标签 -->				
  <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
</div>

<script>
var luyou = new VueRouter({    //申明路由
    routes:[   
            {      /*数组里每一个{}对象代表一个路由链接*/
              path: '/go',
              component : { 
            	  template: '<div>{{ go }}</div>',   /*路由链接具体视图*/
		           data : function(){
		       		    return {
		       		    	go : "my go "
		       		    }   
		       	    }
            	  } 
            },
            {    /*数组里每一个{}对象代表一个路由链接*/
            	path: '/bar',
               component: {
            	   template: '<div>{{ bar }}</div>', /*路由链接具体视图*/
            	   data : function(){
            		    return {
            		    	bar : "my bar "
            		    }   
            	    }
            	 } 
            }
          ]
})


var app = new Vue({ 
	el : "#app",
	router : luyou,  //链接路由
	data : {
		message : "学习Vue-router"
	}
});




</script>
	
</body>
</html>



